import React from 'react'
import axios from 'axios';
import './Content.css'
export default function Content() {
    const [classify,setclassify]=React.useState([])
    const [newsinger,setnewsinger]=React.useState([])
    const [toplist,settoplist]=React.useState([])
    const [artist,setartist]=React.useState([])
    const [dj,setdj]=React.useState([])
    React.useEffect(()=>{
        getclassify()
        getnewsinger()
        gettoplist()
        getartist()
        getdj()
      },[])

async function getclassify(){
      let res =await axios.post("http://jacklv.cn:3000/personalized")
      console.log("classify",res.data.result)
   
      setclassify(res.data.result)
     

    }

    async function getnewsinger(){
        let res =await axios.post("http://jacklv.cn:3000/top/album")
        console.log("setnewsinger",res.data.weekData)
     
        setnewsinger(res.data.weekData)
       
  
      }
      async function gettoplist(){
        let res =await axios.post("http://jacklv.cn:3000/toplist/detail")
        console.log(" getnewtoplist",res.data.list)
       
        settoplist(res.data.list)
       
  
      }
    //歌手榜
    async function getartist(){
        let res=await axios.post("http://jacklv.cn:3000/toplist/artist")
        console.log("歌手榜",res.data.list.artists)
        let list= res.data.list.artists.slice(0,10)
        setartist(list)
        
  
      }
    //主播榜
    async function getdj(){
        let res=await axios.post("http://jacklv.cn:3000/dj/toplist/popular")
        console.log("dj榜",res.data.data.list)
        let list= res.data.data.list.slice(0,10)
        setdj(list)
        
  
      }

  return (
    <div className='content'>
        <div className='leftcontent'>
            <div className='musicdetali'>
                <div className='navs'>
                    <div className='title'>热门推荐</div>         
                    <div className='classify'>
                        <div className='ctext'>华语</div>
                        <div className='ctext'>流行</div>
                        <div className='ctext'>摇滚</div>
                        <div className='ctext'>民谣</div>
                        <div className='ctext'>电子</div>

                    </div>

                    <div className='more'>更多</div>
                    </div>   
                    <div className='musicbox'>
                {classify.map(item=>{
                return   <div className='box' key={item.id}>
                    <img src={item.picUrl} alt=""  className='imgs'/>
                <p>{item.name}</p>
                  <div className='bkimg'>

                    
                    </div>  
                </div>
                
         

                })}
                   </div>
                {/* <div className='musicbox'>
                    <div className='box'>
                        <img src="" alt=""  className='imgs'/>
                    <p>好好爱这个世界，因为你值得</p>
                      <div className='bkimg'>

                        
                        </div>  
                    </div>
                    
                </div> */}
            </div>

            <div className='musicdetali'>
                <div className='navs'>
                    <div className='title'>新碟上架</div>         

                    <div className='mores'>更多</div>
                    </div>   

                <div className='scollImg'>
                    {newsinger.map(item=>{
                    return <div className='imgsbox' key={item.picUrl}>
                    <img src={item.picUrl} alt="" className='Img' />
                    <p>{item.name}</p>
                    <p>{item.company}</p>
                </div>

                    })}

{/*                     
                    <div className='imgsbox'>
                        <img src="" alt="" className='Img' />
                        <p>冠军情歌</p>
                        <p>马思维/</p>
                    </div>
                    <div className='imgsbox'>
                        <img src="" alt="" className='Img' />
                        <p>冠军情歌</p>
                        <p>马思维/</p>
                    </div>
                    <div className='imgsbox'>
                        <img src="" alt="" className='Img' />
                        <p>冠军情歌</p>
                        <p>马思维/</p>
                    </div>
                    <div className='imgsbox'>
                        <img src="" alt="" className='Img' />
                        <p>冠军情歌</p>
                        <p>马思维/</p>
                    </div> */}
                  

                </div>
               
            </div>

            <div className='musicdetali'>
                <div className='navs'>
                    <div className='title'>榜单</div>         

                    <div className='mores'>更多</div>
                    </div>   
                <div className='rankings'>
                <table>
                    <thead>
                        <tr>
                            <th>飙升榜</th>
                            <th>新歌榜</th>
                            <th>原创榜</th>
                        </tr>
                    </thead>
                    <tbody>
                        {toplist.map(item=>{
                            return  <tr key={item.coverImgUrl
                            }>
                                {item.tracks.map(m=>{
                                        return  <td key={m.second}>{m.first}</td>
                                    })}
                          
                           
                            {/* <td>1.风驶过的声音</td> */}
                        </tr>
                        })}

                        

                    </tbody>

                </table>


                </div>
               
            </div>
        </div>

        <div className='rightcontent'>
                <div className='singer'>
                     <div className='singernav'>
                        <p>入驻歌手</p>
                        <p>查看全部》</p>
                        </div>
                    {} 
                    {artist.map(item=>{
                        return <div className='singerimg' key={item.id}>
                        <img src={item.picUrl} alt=""  className='simg'/>
                        <div className='singername'><p>{item.name}</p>
                            <p>{item.alias[0]}</p>
                        </div>
                    </div>
                    })}
                    {/* <div className='singerimg'>
                        <img src="" alt=""  className='simg'/>
                        <div className='singername'><p>张惠妹</p>
                            <p>台湾歌手张惠妹</p>
                        </div>
                    </div> */}

                </div>

                <div className='singer'>
                     <div className='singernav'>
                        <p>热门主播</p>
                        <p>查看全部》</p>
                        </div>     
                        {dj.map(item=>{
                            return <div className='singerimg' key={item.id}>
                            <img src={item.avatarUrl} alt=""  className='simg'/>
                            <div className='singername'><p>{item.nickName}</p>
                                {/* <p>心里学家</p> */}
                            </div>
                        </div>
                        })}  
                    {/* <div className='singerimg'>
                        <img src="" alt=""  className='simg'/>
                        <div className='singername'><p>成立</p>
                            <p>心里学家</p>
                        </div>
                    </div> */}
                 

                </div>

        </div>


     



    </div>
  )
}
